<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/mediapipe1/camera_utils.js" crossorigin="anonymous"></script>
		<script src="js/mediapipe1//control_utils.js" crossorigin="anonymous"></script>
		<script src="js/mediapipe1//drawing_utils.js" crossorigin="anonymous"></script>
		<script src="js/mediapipe1//holistic.js" crossorigin="anonymous"></script>
	</head>

	<body>
		<div class="container">
			<video class="input_video"></video>
			<canvas class="output_canvas" width="1280px" height="720px"></canvas>
		</div>
	</body>
	<script type="module">
		const videoElement = document.getElementsByClassName('input_video')[0];
		const canvasElement = document.getElementsByClassName('output_canvas')[0];
		const canvasCtx = canvasElement.getContext('2d');

		function onResults(results) {
			canvasCtx.save();
			canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
			canvasCtx.drawImage(
					results.image, 0, 0, canvasElement.width, canvasElement.height);
			drawConnectors(canvasCtx, results.poseLandmarks, POSE_CONNECTIONS,
										 {color: '#00FF00', lineWidth: 4});
			drawLandmarks(canvasCtx, results.poseLandmarks,
										{color: '#FF0000', lineWidth: 2});
			drawConnectors(canvasCtx, results.faceLandmarks, FACEMESH_TESSELATION,
										 {color: '#C0C0C070', lineWidth: 1});
			drawConnectors(canvasCtx, results.leftHandLandmarks, HAND_CONNECTIONS,
										 {color: '#CC0000', lineWidth: 5});
			drawLandmarks(canvasCtx, results.leftHandLandmarks,
										{color: '#00FF00', lineWidth: 2});
			drawConnectors(canvasCtx, results.rightHandLandmarks, HAND_CONNECTIONS,
										 {color: '#00CC00', lineWidth: 5});
			drawLandmarks(canvasCtx, results.rightHandLandmarks,
										{color: '#FF0000', lineWidth: 2});
			canvasCtx.restore();
		}

		const holistic = new Holistic({locateFile: (file) => {
			return `https://cdn.jsdelivr.net/npm/@mediapipe/holistic/${file}`;
		}});
		holistic.setOptions({
			upperBodyOnly: false,
			smoothLandmarks: true,
			minDetectionConfidence: 0.5,
			minTrackingConfidence: 0.5
		});
		holistic.onResults(onResults);

		const camera = new Camera(videoElement, {
			onFrame: async () => {
				await holistic.send({image: videoElement});
			},
			width: 1280,
			height: 720
		});
		camera.start();
	</script>

</html>
